<template>
<div>
  <el-dialog
  title="选择歌单" :modal='true'
  :visible.sync="dialogVisible"
  width="30%"
 >
  <el-select style="width:100%" v-model="gid" placeholder="请选择">
    <el-option
      v-for="item in gdList"
      :key="item.id"
      :label="item.title"
      :value="item.id">
    </el-option>
  </el-select>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="queding">确 定</el-button>
  </span>
</el-dialog>
  <div class="yinyue" v-if="list.length">
    
    <div class="liebiao" v-show="isShow">
      <div class="header">播放列表（{{ list.length }}）</div>
      <div
        class="item"
        v-for="(v, i) in list"
        :key="v.id"
        :class="{ cur: v.id == curData.id }"
        @click="cliItem(i)"
      >
        <div style="display: flex; align-items: center">
          <span style="width: 24px; position: relative; padding-right: 4px">
            <svg
              v-if="v.id == curData.id"
              style="position: absolute; top: 50%; transform: translateY(-50%)"
              t="1740121931220"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7083"
              width="20"
              height="20"
            >
              <path
                d="M544 128v768h-64V128h64z m-192 128v512H288V256h64z m384 0v512h-64V256h64zM160 384v256H96v-256h64z m768 0v256h-64v-256h64z"
                fill="#d81e06"
                p-id="7084"
              ></path>
            </svg>
          </span>
          <span> {{ v.name }}</span>
        </div>
        <div>{{ v.gname }}</div>
      </div>
    </div>
    <div class="content">
      <div class="buttons">
        <svg
          @click="preOrNext('pre')"
          t="1740115252105"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2309"
          width="30"
          height="30"
        >
          <path
            d="M512 62.389956c-248.312412 0-449.610044 201.297632-449.610044 449.610044s201.297632 449.610044 449.610044 449.610044 449.610044-201.297632 449.610044-449.610044S760.312412 62.389956 512 62.389956zM786.507004 786.507004c-35.672454 35.672454-77.196173 63.672158-123.416867 83.222423-47.821145 20.22667-98.655927 30.482245-151.09116 30.482245-52.435233 0-103.270015-10.255575-151.09116-30.482245-46.220694-19.549242-87.744413-47.549969-123.416867-83.222423-35.672454-35.672454-63.672158-77.196173-83.222423-123.416867-20.22667-47.821145-30.482245-98.655927-30.482245-151.090137 0-52.435233 10.255575-103.270015 30.482245-151.09116 19.549242-46.220694 47.549969-87.744413 83.222423-123.416867 35.672454-35.672454 77.196173-63.672158 123.416867-83.222423 47.821145-20.22667 98.654904-30.482245 151.09116-30.482245 52.435233 0 103.268992 10.255575 151.09116 30.482245 46.220694 19.549242 87.744413 47.549969 123.416867 83.222423 35.672454 35.672454 63.672158 77.196173 83.222423 123.416867 20.22667 47.821145 30.482245 98.655927 30.482245 151.09116 0 52.435233-10.255575 103.268992-30.482245 151.090137C850.179163 709.310831 822.179458 750.83455 786.507004 786.507004z"
            p-id="2310"
            fill="#e6e6e6"
          />
          <path
            d="M715.830315 305.667701 448.346261 507.980453c-3.094478 1.786693-3.094478 6.252401 0 8.039093l267.484054 202.312752c3.094478 1.786693 6.961552-0.446162 6.961552-4.019547l0-404.625504C722.791867 306.113863 718.924793 303.881009 715.830315 305.667701z"
            p-id="2311"
            fill="#e6e6e6"
          />
          <path
            d="M398.078391 306.049395l-92.229564 0c-2.563382 0-4.640694 2.365884-4.640694 5.28333l0 401.334551c0 2.917446 2.078335 5.28333 4.640694 5.28333l92.229564 0c2.563382 0 4.641717-2.365884 4.641717-5.28333L402.720108 311.332724C402.719084 308.415278 400.641773 306.049395 398.078391 306.049395z"
            p-id="2312"
            fill="#e6e6e6"
          />
        </svg>
        <svg
          @click="playOrPause"
          v-if="!playStatus"
          style="margin: 0 15px"
          t="1740115285148"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4398"
          width="40"
          height="40"
        >
          <path
            d="M512 113c220 0 399 179 399 399S732 911 512 911 113 732 113 512s179-399 399-399m0-42C268.4 71 71 268.4 71 512s197.4 441 441 441 441-197.4 441-441S755.6 71 512 71z"
            p-id="4399"
            fill="#e6e6e6"
          />
          <path
            d="M440.3 697.6c-29.9 0-54.3-24.3-54.3-54.3V380.6c0-29.9 24.4-54.3 54.3-54.3 9.4 0 18.7 2.5 27 7.3L694.9 465c17 9.8 27.1 27.4 27.1 47s-10.1 37.2-27.1 47L467.4 690.3c-8.4 4.8-17.7 7.3-27.1 7.3z m0-329.2c-5.9 0-12.3 4.7-12.3 12.3v262.7c0 10.3 10.9 14.9 18.4 10.6l227.5-131.4c5.5-3.2 6.1-8.4 6.1-10.6s-0.6-7.4-6.1-10.6L446.4 370c-2-1.1-4-1.6-6.1-1.6z"
            p-id="4400"
            fill="#e6e6e6"
          />
        </svg>
        <svg
          @click="playOrPause"
          v-if="playStatus"
          style="margin: 0 15px"
          t="1740117228128"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="12992"
          width="40"
          height="40"
        >
          <path
            d="M512 1024C228.266667 1024 0 795.733333 0 512S228.266667 0 512 0s512 228.266667 512 512-228.266667 512-512 512z m0-42.666667c260.266667 0 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333z m-106.666667-682.666666c12.8 0 21.333333 8.533333 21.333334 21.333333v384c0 12.8-8.533333 21.333333-21.333334 21.333333s-21.333333-8.533333-21.333333-21.333333V320c0-12.8 8.533333-21.333333 21.333333-21.333333z m213.333334 0c12.8 0 21.333333 8.533333 21.333333 21.333333v384c0 12.8-8.533333 21.333333-21.333333 21.333333s-21.333333-8.533333-21.333334-21.333333V320c0-12.8 8.533333-21.333333 21.333334-21.333333z"
            fill="#e6e6e6"
            fill-opacity="0.9"
            p-id="12993"
          />
        </svg>
        <svg
          @click="preOrNext('next')"
          t="1740115272404"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3355"
          width="30"
          height="30"
        >
          <path
            d="M512 62.389956c-248.312412 0-449.610044 201.297632-449.610044 449.610044s201.297632 449.610044 449.610044 449.610044 449.610044-201.297632 449.610044-449.610044S760.312412 62.389956 512 62.389956zM786.507004 786.507004c-35.672454 35.672454-77.196173 63.672158-123.416867 83.222423-47.821145 20.22667-98.655927 30.482245-151.09116 30.482245-52.435233 0-103.270015-10.255575-151.09116-30.482245-46.220694-19.549242-87.744413-47.549969-123.416867-83.222423-35.672454-35.672454-63.672158-77.196173-83.222423-123.416867-20.22667-47.821145-30.482245-98.655927-30.482245-151.090137 0-52.435233 10.255575-103.270015 30.482245-151.09116 19.549242-46.220694 47.549969-87.744413 83.222423-123.416867 35.672454-35.672454 77.196173-63.672158 123.416867-83.222423 47.821145-20.22667 98.654904-30.482245 151.09116-30.482245 52.435233 0 103.268992 10.255575 151.09116 30.482245 46.220694 19.549242 87.744413 47.549969 123.416867 83.222423 35.672454 35.672454 63.672158 77.196173 83.222423 123.416867 20.22667 47.821145 30.482245 98.655927 30.482245 151.09116 0 52.435233-10.255575 103.268992-30.482245 151.090137C850.179163 709.310831 822.179458 750.83455 786.507004 786.507004z"
            p-id="3356"
            fill="#e6e6e6"
          />
          <path
            d="M575.653739 507.980453 308.169685 305.667701c-3.094478-1.786693-6.961552 0.446162-6.961552 4.019547l0 404.625504c0 3.572362 3.868097 5.806239 6.961552 4.019547l267.484054-202.312752C578.747193 514.232854 578.747193 509.767146 575.653739 507.980453z"
            p-id="3357"
            fill="#e6e6e6"
          />
          <path
            d="M718.151174 306.049395l-92.229564 0c-2.563382 0-4.640694 2.365884-4.640694 5.28333l0 401.334551c0 2.917446 2.078335 5.28333 4.640694 5.28333l92.229564 0c2.563382 0 4.640694-2.365884 4.640694-5.28333L722.791867 311.332724C722.791867 308.415278 720.714556 306.049395 718.151174 306.049395z"
            p-id="3358"
            fill="#e6e6e6"
          />
        </svg>
      </div>
      <div class="center">
        <img
          @click="goDetail"
          src="https://p1.music.126.net/eFapQ9unl6QYihotWPKDAw==/109951163077007777.jpg?param=34y34"
          alt
        />
        <div>
          <div>
            <span>{{ curData.name }}</span>
            <span>{{ curData.gname }}</span>
          </div>
          <div>
            <el-slider
              :show-tooltip="false"
              v-model="currentTime"
              style="width: 460px"
              :max="duration"
              @change="change"
            ></el-slider>
            <span>{{ curTime }}</span>
            <span style="margin: 0 2px">/</span>
            <span>{{ durTime }}</span>
          </div>
        </div>
      </div>
      <div class="buttons">
          <el-tooltip
          class="item"
          effect="dark"
          content="添加歌单"
          placement="top"
          style="margin-left: 20px">
        <svg  @click="addGedan(null)"
          t="1740115411460"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7972"
          width="30"
          height="30"
        >
          <path
            d="M970.666667 213.333333H546.586667a10.573333 10.573333 0 0 1-7.54-3.126666L429.793333 100.953333A52.986667 52.986667 0 0 0 392.08 85.333333H96a53.393333 53.393333 0 0 0-53.333333 53.333334v704a53.393333 53.393333 0 0 0 53.333333 53.333333h874.666667a53.393333 53.393333 0 0 0 53.333333-53.333333V266.666667a53.393333 53.393333 0 0 0-53.333333-53.333334z m10.666666 629.333334a10.666667 10.666667 0 0 1-10.666666 10.666666H96a10.666667 10.666667 0 0 1-10.666667-10.666666V138.666667a10.666667 10.666667 0 0 1 10.666667-10.666667h296.08a10.573333 10.573333 0 0 1 7.54 3.126667l109.253333 109.253333A52.986667 52.986667 0 0 0 546.586667 256H970.666667a10.666667 10.666667 0 0 1 10.666666 10.666667z m-298.666666-309.333334a21.333333 21.333333 0 0 1-21.333334 21.333334H554.666667v106.666666a21.333333 21.333333 0 0 1-42.666667 0V554.666667H405.333333a21.333333 21.333333 0 0 1 0-42.666667h106.666667V405.333333a21.333333 21.333333 0 0 1 42.666667 0v106.666667h106.666666a21.333333 21.333333 0 0 1 21.333334 21.333333z"
            fill="#e6e6e6"
            p-id="7973"
          />
        </svg>
          </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="下载"
          placement="top"
          style="margin-left: 20px"
        >
          <svg
            @click="xiazai"
            style="margin: 0 15px"
            t="1740115427629"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9029"
            width="30"
            height="30"
          >
            <path
              d="M546.304 580.224l57.6-75.008c12.8-16.768 32.32-19.904 49.088-7.04 16.704 12.8 17.28 32 4.48 48.768L546.304 690.56c-15.36 19.968-49.408 19.968-64.64 0L370.368 546.944c-12.8-16.704-11.072-35.968 5.696-48.768 16.768-12.864 35.072-9.728 47.872 7.04l57.6 75.008V165.376c0-21.12 11.264-38.208 32.32-38.208 21.12 0 32.384 17.152 32.384 38.208v414.848z m288.448-70.08c0-21.12 10.176-38.208 31.296-38.208 21.12 0 31.232 12.992 31.232 34.048v275.2c0 59.072-38.4 111.168-97.472 111.168H225.344c-59.136 0-95.744-47.936-95.744-107.008v-275.2c0-21.12 10.496-38.208 31.616-38.208 21.12 0 31.552 17.152 31.552 38.208v275.2c0 16.896 15.68 47.296 32.576 47.296h574.464c16.896 0 34.944-30.4 34.944-47.36V510.208z"
              fill="#e6e6e6"
              p-id="9030"
            />
          </svg>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          :content="mode == 1 ? '顺序播放' : '单曲循环'"
          placement="top"
        >
          <svg
            v-if="mode == 1"
            @click="mode = 2"
            t="1740115488784"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10914"
            width="30"
            height="30"
          >
            <path
              d="M824.3 291.4c-51.5-22.2-133.1-17-206.9-17H231.1V173.6h-1.3c-8.7 9.2-17.5 18.3-26.2 27.5L97.5 307.2c44.5 47.1 89 94.3 133.6 141.4 0.4-35.8 0.9-71.6 1.3-107.4h403.3c70.6 0 145.1-5.7 184.6 24.9 41.4 32.1 40 100.7 39.3 175.5 20.1 21.8 40.2 43.6 60.2 65.5 1.7 1.3 3.5 2.6 5.2 3.9 0.4-38.8 0.9-77.7 1.3-116.5 0.1-102.5-31.2-172.6-102-203.1z m-32.7 390.2H388.3c-67.3 0-142.1 6.3-180.7-22.3-43.8-32.4-42.7-100.4-41.9-178.1-22.3-24-44.5-48-66.8-72-0.5 120.1-8.2 240.1 57.6 293.3 62.5 50.5 135.8 45.8 248.8 45.8h386.3c0.4 34 0.9 68.1 1.3 102.1l132.2-132.2C881 670.6 836.9 623 792.9 575.5c-0.5 35.4-0.9 70.7-1.3 106.1z"
              fill="#e6e6e6"
              p-id="10915"
            />
          </svg>
          <svg
            v-if="mode == 2"
            @click="mode = 1"
            t="1740115524664"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11955"
            width="30"
            height="30"
          >
            <path
              d="M928 476.8c-19.2 0-32 12.8-32 32v86.4c0 108.8-86.4 198.4-198.4 198.4H201.6l41.6-38.4c6.4-6.4 12.8-16 12.8-25.6 0-19.2-16-35.2-35.2-35.2-9.6 0-22.4 3.2-28.8 9.6l-108.8 99.2c-16 12.8-12.8 35.2 0 48l108.8 96c6.4 6.4 19.2 12.8 28.8 12.8 19.2 0 35.2-12.8 38.4-32 0-12.8-6.4-22.4-16-28.8l-48-44.8h499.2c147.2 0 265.6-118.4 265.6-259.2v-86.4c0-19.2-12.8-32-32-32zM96 556.8c19.2 0 32-12.8 32-32v-89.6c0-112 89.6-201.6 198.4-204.8h496l-41.6 38.4c-6.4 6.4-12.8 16-12.8 25.6 0 19.2 16 35.2 35.2 35.2 9.6 0 22.4-3.2 28.8-9.6l105.6-99.2c16-12.8 12.8-35.2 0-48l-108.8-96c-6.4-6.4-19.2-12.8-28.8-12.8-19.2 0-35.2 12.8-38.4 32 0 12.8 6.4 22.4 16 28.8l48 44.8H329.6C182.4 169.6 64 288 64 438.4v86.4c0 19.2 12.8 32 32 32z"
              p-id="11956"
              fill="#e6e6e6"
            ></path>
            <path
              d="M544 672V352h-48L416 409.6l16 41.6 60.8-41.6V672z"
              p-id="11957"
              fill="#e6e6e6"
            ></path>
          </svg>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="播放列表"
          placement="top"
          style="margin-left: 20px"
        >
          <svg
            @click="isShow = !isShow"
            t="1740120157069"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6067"
            width="30"
            height="28"
          >
            <path
              d="M204.8 552.96h204.8a20.48 20.48 0 0 1 0 40.96H204.8a20.48 20.48 0 0 1 0-40.96z"
              p-id="6068"
              fill="#e6e6e6"
            ></path>
            <path
              d="M143.36 921.6a40.96 40.96 0 0 1-40.96-40.96V143.36a40.96 40.96 0 0 1 40.96-40.96h614.4a40.96 40.96 0 0 1 40.96 40.96v327.68h40.96V143.36a81.92 81.92 0 0 0-81.92-81.92H143.36a81.92 81.92 0 0 0-81.92 81.92v737.28a81.92 81.92 0 0 0 81.92 81.92h327.68v-40.96z"
              p-id="6069"
              fill="#e6e6e6"
            ></path>
            <path
              d="M737.28 512a225.28 225.28 0 1 0 225.28 225.28 225.28 225.28 0 0 0-225.28-225.28z m0 409.6a184.32 184.32 0 1 1 184.32-184.32 184.32 184.32 0 0 1-184.32 184.32z"
              p-id="6070"
              fill="#e6e6e6"
            ></path>
            <path
              d="M771.2768 660.6848Q634.88 584.0896 634.88 737.28t136.6016 76.5952q136.192-76.5952-0.2048-153.1904z m-13.5168 122.88Q675.84 829.44 675.84 737.28t81.92-46.08q81.92 46.08 0 92.16zM225.28 307.2h-20.48a20.48 20.48 0 0 0 0 40.96h20.48zM696.32 307.2H266.24v40.96h430.08a20.48 20.48 0 0 0 0-40.96z"
              p-id="6071"
              fill="#e6e6e6"
            ></path>
          </svg>
        </el-tooltip>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import api from "@/api/index";
export default {
  data() {
    return {
      gdList:[],
      gid:null,
      vid:null,
      dialogVisible:false,
      jindu: 50,
      isShow: false,
      mode: 1, //1顺序2单曲
      list: [],
      curIndex: 0,
      curData: {},
      playStatus: false,
      musicInstance: null,
      duration: 0,
      currentTime: 0,
    };
  },
  computed: {
    curTime() {
      if (this.currentTime == 0) {
        return "00:00";
      }
      const fen = Math.floor(this.currentTime / 60);
      const miao = Math.floor(this.currentTime % 60);
      return `${fen < 10 ? "0" + fen : fen}:${miao < 10 ? "0" + miao : miao}`;
    },
    durTime() {
      if (this.duration == 0) {
        return "00:00";
      }
      const fen = Math.floor(this.duration / 60);
      const miao = Math.floor(this.duration % 60);
      return `${fen < 10 ? "0" + fen : fen}:${miao < 10 ? "0" + miao : miao}`;
    },
  },
  methods: {
    queding(){
       if(!this.gid){
                    return this.$message({
          message: '请先选择',
          type: 'warning'
        });
                }
                api.addGedan({
                  uid:this.$store.state.user.id,
                  gid:this.gid,
                  vid:this.vid||this.curData.id
                }).then(res=>{
                  if(res.code==200){
this.$message({
          message: '收藏成功',
          type: 'success'
        });
                  this.dialogVisible = false
                  }

                })
    },
    addGedan(id){
      this.vid=id
      if(!this.$store.state.user.id){
                    return this.$message({
          message: '请先登录',
          type: 'warning'
        });
                }
      api.gedanlist({uid:this.$store.state.user.id}).then(res=>{
this.gdList=res.data
   this.dialogVisible=true
   console.log(this.dialogVisible);
   this.gid=null
    })
   
    },
    goDetail() {
      this.$router.push("/xiangqing?id=" + this.curData.id);
    },
    xiazai() {
      console.log(this.curData.url.split("name=")[1]);
      api
        .dowlon({
          name: this.curData.url.split("name=")[1],
        })
        .then((res) => {
          const blob = new Blob([res]);
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", this.curData.url.split("name=")[1]);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        });
    },
    change(e) {
      this.musicInstance.currentTime = e;
    },
    play() {
      if (!this.musicInstance) {
        this.musicInstance = new Audio(this.curData.url); // 音乐文件的 URL
        this.musicInstance.addEventListener("play", (e) => {
          this.$store.commit('SET_Cur',this.curData.id)
          this.$store.commit('SET_Status',true)
          this.playStatus = true;
        });
        this.musicInstance.addEventListener("ended", (e) => {
          this.playStatus = true;
          if (this.mode == 1) {
            this.preOrNext("next");
          } else {
            this.musicInstance.currentTime = 0;
            this.musicInstance.play();
          }
        });
        this.musicInstance.addEventListener("pause", () => {
          this.playStatus = false;
          this.$store.commit('SET_Status',false)
        }); // 监听暂停事件
        this.musicInstance.addEventListener("timeupdate", (e) => {
          this.currentTime = this.musicInstance.currentTime;
          this.duration = this.musicInstance.duration;
        }); // 监听暂停事件
      } else {
        this.musicInstance.src = this.curData.url;
      }
      api.editNum({
        num:1,
        id:this.curData.id
      })
      this.musicInstance.play();
    },
    playOrPause() {
      if (this.playStatus) {
        this.musicInstance.pause();
      } else {
        this.musicInstance.play();
      }
    },
    preOrNext(t) {
      let lastIndex = this.list.length - 1;
      if (t == "pre") {
        this.curIndex = this.curIndex == 0 ? lastIndex : this.curIndex - 1;
      } else {
        this.curIndex = this.curIndex == lastIndex ? 0 : this.curIndex + 1;
      }
      this.curData = this.list[this.curIndex];
      this.play();
    },
    cliItem(i) {
      console.log(this.curIndex,i,this.curIndex==i);
      if(this.curIndex==i){
        return this.playOrPause()
      }
      this.curIndex = i;
      this.curData = this.list[this.curIndex];
      this.play();
    },
  },
  mounted() {
        this.$root.$on('jiaruGd',(id)=>{
this.addGedan(id)
        })
    this.$root.$on("playG", (e) => {
      if(e.id==this.$store.state.yyCur){
        return   this.playOrPause();
      }
      if (!this.list.length) {
        this.list.push(e);
        this.curIndex = 0;
      } else {
        let index = this.list.findIndex(v => v.id == e.id);
        if (index == -1) {
          this.list.push(e);
          this.curIndex = this.list.length - 1;
        } else {
          this.curIndex = index;
        }
      }
      this.curData = this.list[this.curIndex];
      this.play();
    });
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-slider__bar {
  background-color: rgb(199, 12, 12);
}
::v-deep .el-slider__button {
  border-color: rgb(199, 12, 12);
}
.liebiao {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  // height: 100px;
  left: 50%;
  width: 600px;
  //    right: 0;
  transform: translateX(-50%);
  bottom: 66px;
  border-radius: 10px 10px 0 0;
  padding-bottom: 20px;
  .header {
    border-radius: 10px 10px 0 0;
    background-color: rgb(32, 32, 32);
    line-height: 40px;
    padding-left: 40px;
    height: 40px;
    color: white;
  }
  .item {
    padding: 0 20px;
    cursor: pointer;
    height: 40px;
    display: flex;
    justify-content: space-between;
    color: white;
    line-height: 40px;
    &.cur {
      background-color: rgb(42, 42, 42);
    }
    &:hover {
      background-color: rgb(42, 42, 42);
    }
    padding-right: 20px;
  }
}
.yinyue {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66px;
  background-color: rgb(46, 46, 46);
  .content {
    svg {
      cursor: pointer;
    }
    height: 66px;
    width: 1200px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    .center {
      width: 660px;
      height: 45px;
      float: left;
      margin-left: 40px;
      // border: 1px solid red;
      display: flex;
      img {
        border-radius: 10px;
        width: 45px;
        margin-right: 20px;
        height: 45px;
      }
      > div {
        > div:nth-child(2) {
          display: flex;
          color: #797979;
          align-items: center;
          > span:nth-child(2) {
            margin-left: 20px;
            color: #a1a1a1;
          }
        }
        > div:nth-child(1) {
          > span:nth-child(1) {
            color: #e8e8e8;
          }
          > span:nth-child(2) {
            margin-left: 20px;
            color: #9b9b9b;
          }
        }
      }
    }
  }
  .buttons {
    display: flex;
    align-items: center;
  }
}
</style>